<template>
  <div class="backTime">
    <el-row>
      <el-col :span="6"><div class="txt">回溯时长（秒）</div></el-col>
      <el-col :span="6"><div class="txt">消耗电量</div></el-col>
    </el-row>
    <br />
    <div v-if="list.length == 0">
      <el-row class="br">
        <el-col :span="6"
          ><div class="input">
            <el-input v-model="test" placeholder="请输入"></el-input></div
        ></el-col>
        <el-col :span="6"
          ><div class="input">
            <el-input v-model="test" placeholder="请输入"></el-input></div
        ></el-col>
        <el-col :span="6">
          <el-button type="info" :disabled="true" plain @click="updata(item)"
            >更新</el-button
          >
        </el-col>
      </el-row>
    </div>

    <el-row class="br" v-for="item in list" :key="item.id">
      <el-col :span="6"
        ><div class="input">
          <el-input
            v-model="item.value1"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="请输入"
          ></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="input">
          <el-input
            v-model="item.electric"
            placeholder="请输入"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
          ></el-input></div
      ></el-col>
      <el-col :span="6">
        <el-button type="info" plain @click="updata(item)">更新</el-button>
      </el-col>
    </el-row>
    <br />
  </div>
</template>

<script>
import {
  electricBackTime,
  electricBackTimeUpdata,
} from "@/api/operationManagement";
export default {
  data() {
    return {
      // form: {
      //   back: "",
      //   consumption: "",
      // },
      list: [
        // { id: 0, value1: "2", electric: "3" },
        // { id: 2, value1: "3", electric: "4" },
      ],
      keyName: "",
      test: "",
    };
  },
  methods: {
    async getData() {
      const res = await electricBackTime();
      if (res.code == 0) {
        this.keyName = res.data.electricValue.key_name;
        this.list = res.data.electricValue.value;
      }
    },
    async updata(obj) {
      // console.log(obj);
      if (obj.value1 == "" || obj.electric == "") {
        this.$message({
          type: "error",
          message: "回溯时长或消耗电量不能为空！",
        });
        return;
      }
      const res = await electricBackTimeUpdata({
        keyName: this.keyName,
        id: obj.id,
        value1: obj.value1,
        value2: obj.electric,
      });
      if (res.code == 0) {
        this.$message({
          type: "success",
          message: "更新成功",
        });
        this.getData();
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
.backTime {
  .br {
    margin-bottom: 20px;
  }
  .txt {
    text-align: center;
    font-size: 16px;
    font-size: 500;
    color: #333;
  }
  .placeholder {
    width: 100%;
    height: 1px;
  }
  .input {
    padding: 0 20px;
  }
  /deep/.el-table td,
  /deep/.el-table th.is-leaf {
    border: none !important;
  }
}
</style>